<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import PageContainer from '@/components/PageContainer.vue'

const userStore = useUserStore()
const userInfo = ref(userStore.userInfo)
</script>

<template>
  <page-container title="首页">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <span>欢迎使用家庭健康管理系统</span>
            </div>
          </template>
          <div class="card-content">
            <el-avatar :size="64" :src="userInfo?.avatar" />
            <h3>{{ userInfo?.nickname || userInfo?.username }}</h3>
            <p>上次登录时间：{{ new Date().toLocaleString() }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </page-container>
</template>

<style scoped>
.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.card-content h3 {
  margin: 10px 0;
  color: #303133;
}

.card-content p {
  color: #909399;
  font-size: 14px;
}
</style> 